<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="box">
    <div class="Lunaregg">
      <dv-border-box12>
        <h4>月度料蛋折线</h4>
        <Poachedegg></Poachedegg>
      </dv-border-box12>
    </div>
    <div class="yield">
      <dv-border-box12>
        <h4>月蛋产量图</h4>
        <Egg></Egg>
      </dv-border-box12>
    </div>
    <div class="sell">
      <dv-border-box12>
        <h4>厂鸡售出总和</h4>
        <Sell></Sell>
      </dv-border-box12>
    </div>
  </div>
</template>
  
<script lang="ts" setup>
import Poachedegg from '../Month/Echarts/Poachedegg.vue'
import Egg from '../Month/Echarts/Egg.vue'
import Sell from '../Month/Echarts/Sell.vue'

</script>
  
<style scoped>
.box {
  width: 100%;
  height: 100%;
}

.Lunaregg {
  width: 100%;
  height: 28vh;
  margin-left: 0.5vw;
}

.Lunaregg h4 {
  width: 100%;
  text-align: center;
  padding-top: 1vh;
  color: #2cf6f4;
}

.yield {
  width: 100%;
  height: 28vh;
  margin-left: 0.5vw;
}

.yield h4 {
  width: 100%;
  text-align: center;
  padding-top: 1vh;
  color: #2cf6f4;
}

.sell {
  width: 100%;
  height: 28vh;
  margin-left: 0.5vw;
}

.sell h4 {
  width: 100%;
  text-align: center;
  padding-top: 1vh;
  color: #2cf6f4;
}
</style>